<template>
	<div ref="EmojiElement" class="pageEmojiElement userSelectNone" v-show="Visible">
		<div class="">
			<div class="" v-if="recorderList.length>0">
				<!-- 本地 -->
				<div class="color-smill EmojiTipTile">
					最近使用
				</div>
				<ul class="emojiItems" style="height:var(--width);overflow: hidden;">
					<li @click="handledSelect(value,0)" class="emojiItem" v-for="value,index in recorderList"
						:key="`showRecorderEmoji${index}`">{{value}}</li>
				</ul>
			</div>
			<div class="">
				<div class="color-smill EmojiTipTile">
					全部表情
				</div>
				<ul class="emojiItems" @click="handledSelect($event,1)"
					:style="{'height':recorderList.length>0?'246px':'307px'}">
					<li class="emojiItem" v-for="value,index in showEmojiList" :key="`showEmoji${index}`">{{value}}</li>
				</ul>
			</div>
		</div>
		<div class="emojiBottomNav">
			<ul class="items">
				<li @click="handledBottomChange(value)" v-for="value,index in emojiNav"
					:key="`showBottomEmoji${value.id}`" class="item textCenter" :class="{'itemActive':value.isShow}">
					<i :class="`iconfont ${value.icon}`"></i>
				</li>
			</ul>
		</div>
		<!-- <button @click="handledSelect">click me</button> -->
	</div>
</template>

<script>
	import {
		expressionEmojis,
		gestureEmojis,
		twelveEmojis,
		publicEmojis
	} from "@/utils/emoji.js"
	export default {
		name: "EmojiElement",
		props: {
			Visible: {
				type: Boolean || String,
				default: false
			}
		},
		data() {
			return {
				recorderList: [], //最近使用过的前？个emoji
				showEmojiList: [], //显示的emoji
				Emojis: {}, //emoji数据
				emojiNav: [{
						value: "expressionEmojis",
						isShow: true,
						id: 1,
						icon: "icon-biaoqingbao1",
					},
					{
						value: "gestureEmojis",
						isShow: false,
						id: 2,
						icon: "icon-hand",
					},
					{
						value: "twelveEmojis",
						isShow: false,
						id: 3,
						icon: "icon-longxiao",
					},
					{
						value: "publicEmojis",
						isShow: false,
						id: 4,
						icon: "icon-longxiao",
					}
				], //导航栏
			}
		},
		mounted() {
			this.Emojis = {
				expressionEmojis,
				gestureEmojis,
				twelveEmojis,
				publicEmojis
			};
			// console.error("---emoji码元问题 待解决---")
			
			this.handledInitData();
		},
		methods: {
			//底部切換
			handledBottomChange(value) {
				for (let i = 0; i < this.emojiNav.length; i++) {
					this.emojiNav[i].isShow = false;
				}
				value.isShow = true
				this.showEmojiList = this.Emojis[value.value]
			},
			//初始化数据
			handledInitData() {
				let expressionEmojis = this.Emojis.expressionEmojis.split(",");
				let gestureEmojis = this.Emojis.gestureEmojis.split(",");
				let twelveEmojis = this.Emojis.twelveEmojis.split(",");
				let publicEmojis = this.Emojis.publicEmojis.split(",");
				this.Emojis={expressionEmojis,gestureEmojis,twelveEmojis,publicEmojis}
				this.showEmojiList = this.Emojis.expressionEmojis
				this.handledGetRecorderData()
			},

			//获取本地使用记录
			handledGetRecorderData() {
				let list = JSON.parse(localStorage.getItem('recorderList'));
				list ? this.recorderList = list.split(",") : ""
			},
			//处理本地使用记录
			handledSetRecorder(data) {
				let findIndex = this.recorderList.indexOf(data)
				if (findIndex != -1) {
					this.recorderList.splice(findIndex, 1)
				}
				this.recorderList.unshift(data)
				if (this.recorderList.length > 8) {
					this.recorderList.pop()
				}
				localStorage.setItem('recorderList', JSON.stringify(this.recorderList.join(",")))
			},
			//选中后的表情包 提交至父组件
			handledSelect(event, index = -1) {
				if (index == 1 && (!event.target.innerHTML || event.target.innerHTML.length>10)) {
					return
				}
				let obj = {
					value: index ? event.target.innerHTML : event,
					index,
					VisibleEmojiElement: false
				}
				this.$emit("handledVisibleEmojiElementChildEmit", obj)
				this.handledSetRecorder(obj.value)
			}
		}
	}
</script>

<style scoped>
	.pageEmojiElement {
		--width: 40px;
		--iconActiveColor: #00aaff;
	}

	.pageEmojiElement {
		width: 100%;
		height: 400px;
		padding: 20px;
		position: relative;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 12px;
		box-shadow: 0 0 20px #888888;
		overflow: hidden;

	}

	.pageEmojiElement ul li {
		list-style-type: none;
	}

	.emojiBottomNav {
		border-top: 1px solid #ccc;
		width: calc(100%);
		left: 0px;
		box-sizing: border-box;
		bottom: 8px;
		height: 45px;
		line-height: 45px;
		background-color: #fff;
		position: absolute;

	}

	.emojiBottomNav .items {
		width: calc(100%);
		display: flex;
		align-items: flex-start;
		justify-self: flex-start;
		box-sizing: border-box;
		flex-wrap: nowrap;
		padding: 0;
		margin: 0 15px;
		overflow-y: hidden;
		overflow-x: auto;
	}

	.emojiBottomNav .items .item {
		width: calc(100%/10);
		min-width: var(--width);
		margin: 2px 5px;
	}

	.emojiBottomNav .items .item:hover {
		background-color: #e7e7e7;
	}

	.emojiBottomNav .itemActive {
		background-color: #ccc;
	}

	.pageEmojiElement .EmojiTipTile {
		height: 20px;
		line-height: 20px;
		box-sizing: border-box;
	}

	.pageEmojiElement .emojiItems {
		display: flex;
		height: 308px;
		align-items: center;
		align-content: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		flex-wrap: wrap;
		padding: 0;
		margin: 0;
		overflow-y: auto;
	}

	.pageEmojiElement .emojiItems .emojiItem {
		width: calc(100%/10);
		min-width: var(--width);
		height: var(--width);
		line-height: var(--width);
		/* margin: 4px; */
		box-sizing: border-box;
		text-align: center;
		list-style-type: none;
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #00ffff;
	}

	.pageEmojiElement .emojiItems .emojiItem:hover {
		background-color: #e7e7e7;
	}
</style>